<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- ，Bootstrap 是移动设备优先的 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- Bootstrap -->
    <link href="./dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./dist/js/jquery-1.11.3.min.js"></script>
    <script src="./dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<!-- 导航 -->
		<ul class="nav nav-tabs">
		  <li role="presentation" class=""><a href="#">Home</a></li>
		  <li role="presentation" class="active"><a href="#">Profile</a></li>
		  <li role="presentation"><a href="#">Messages</a></li>
		</ul>
		<hr>
		<!-- 胶囊导航 -->
		<ul class="nav nav-pills">
		  <li role="presentation" class="active"><a href="#">Home</a></li>
		  <li role="presentation"><a href="#">Profile</a></li>
		  <li role="presentation"><a href="#">Messages</a></li>
		</ul>
		<hr>
		<!-- 路径导航 面包屑 -->
		<ol class="breadcrumb">
		  <li><a href="#">前台</a></li>
		  <li><a href="#">列表</a></li>
		  <li class="active">详情</li>
		</ol>
		<hr>
		<!-- 分页 -->
		<nav>
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li class="active"><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		<hr>
		<!-- 巨幕 -->
		<div class="jumbotron">
		  <h1>Hello, world!</h1>
		  <p>...</p>
		  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
		</div>
		<hr>
		<!-- 缩略图 列表 -->
		<div class="row">
		  <div class="col-md-3">
		    <div class="thumbnail">
		      <img src="./dist/img/1 (1).jpg" alt="...">
		      <div class="caption">
		        <h3>充气的,屌丝专供</h3>
		        <p>99.8元</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
		    </div>
		  </div>
		   <div class="col-md-3">
		    <div class="thumbnail">
		      <img src="./dist/img/1 (1).jpg" alt="...">
		      <div class="caption">
		        <h3>充气的,屌丝专供</h3>
		        <p>99.8元</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
		    </div>
		  </div>
		   <div class="col-md-3">
		    <div class="thumbnail">
		      <img src="./dist/img/1 (1).jpg" alt="...">
		      <div class="caption">
		        <h3>充气的,屌丝专供</h3>
		        <p>99.8元</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
		    </div>
		  </div>
		   <div class="col-md-3">
		    <div class="thumbnail">
		      <img src="./dist/img/1 (1).jpg" alt="...">
		      <div class="caption">
		        <h3>充气的,屌丝专供</h3>
		        <p>99.8元</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
		    </div>
		  </div>
		   <div class="col-md-3">
		    <div class="thumbnail">
		      <img src="./dist/img/1 (1).jpg" alt="...">
		      <div class="caption">
		        <h3>充气的,屌丝专供</h3>
		        <p>99.8元</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
		    </div>
		  </div>

		</div>
		<hr>
		<!-- 下拉框 -->
	 	<div class="dropdown">
	 	  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
	 	    Dropdown
	 	    <span class="caret"></span>
	 	  </button>
	 	  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
	 	    <li class="dropdown-header">北京校区</li>
	 	    <li><a href="#">一校区</a></li>
	 	    <li><a href="#">二校区</a></li>
	 	    <li><a href="#">三校区</a></li>
	 	    <li role="separator" class="divider"></li>
	 	    <li class="dropdown-header">上海校区</li>
	 	    <li><a href="#">一校区</a></li>
	 	    <li><a href="#">二校区</a></li>
	 	  </ul>
	 	</div>
	</div>
</body>
</html>